<template>
  <div>
    <el-row class="top" type="flex" justify="space-between">
    <el-col :span="5">
      <el-switch v-model="form.value" active-color="#67C23A" inactive-color="#EBEEF5" inactive-text="所有桌台：">
            </el-switch>
            <el-switch v-model="form.value" active-color="#67C23A" inactive-color="#EBEEF5" inactive-text="选中桌台：">
            </el-switch>
    </el-col>
    </el-row>
    <div class="app-container">
      <div class="section">
        <el-form ref="form" :model="form" :inline="true" class="add">

<!--          <el-form-item label="">-->
<!--            <el-input v-model="form.min" placeholder="请输入" />-->
<!--          </el-form-item>-->
<!--          -->
          <el-form-item class="mar39">
            <el-button type="primary" >搜索</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10">
          <div v-for="(dict,index) in tableInfo" >
          <el-col   :span="2" >
            <div class="table ">
            <p>{{dict.tableName}}</p>
              <el-switch v-model="dict.status"
                         active-color="#67C23A"
                         inactive-color="#EBEEF5"
                         :inactive-text="dict.status?'通电':'断电'" @change="switchStatus($event,dict)">
            </el-switch>
            </div>
          </el-col>
          </div>

        </el-row>
      </div>
    </div>
  </div>
</template>

<script>


import { getShopTableInfo, listSettlement,updateSettlement } from '@/api/mahjong/settlement'
import { updateTablenumber } from '@/api/mahjong/tablenumber'
export default {
  name: "Shops",

  data() {
    return {
      tableInfo:[],
      form:{
        value:1
      }
    };
  },
  created() {
     this.getTableInfo();
  },
  methods: {
    switchStatus(event,item){
      //  item.status=event?0:1;
     /* updateSettlement(item).then(response => {
         this.getTableInfo();
      });*/
      item.id=item.tableId
      updateTablenumber(item).then(response => {
       this.getTableInfo();
      });

    },
    /** 查询结算列列表 */
    getTableInfo() {
      getShopTableInfo().then(response => {
        response.data.map(item=>{
          item.status==1?item.status=true:item.status=false
        })
        this.tableInfo = response.data;
        // this.total = response.total;
        // this.loading = false;
      });
    },
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .top{
    background-color: #fff;
    align-items: center;
  }
  .section{
    background-color: #fff;
  min-height: calc(100vh - 84px);
  padding: 20px;
  .table{
    background-color: #F4F4F4;
    border-radius: 6px;
    text-align: center;
    height: 80px;
    padding-top: 15px;
    margin-bottom: 10px;
    p{
      color: #9C9186;
      font-size: 16px;
      margin-bottom: 5px;
    }
    &:hover,&:active,&:visited{
      background-color:#CAAB62;

      p{
        color: #fff;
      }
    }
  }
  }
</style>
